<template>
  <div class="commonBoxmp white-bg">
    <TableV2
      @getHeight="getHeight"
      :searchBool="true"
      :column="state.columnData"
      @getCurrentColumns="getCurrentColumns"
      @handleSeach="handleSeach"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
       <template #tableHeader>
        <div class="jcb aic w100">
          <h3 class="mx15">基础表格</h3>
          <el-button type="primary" @click="roleDrawer = true"
          >新增角色</el-button
        >
        </div>
      </template>

      <template #tableContent>
        <div class="flex1">
          <el-skeleton
            class="p20"
            :loading="state.height == 0"
            animated
            :rows="19"
          >
            <template #default>
              <el-table
                class="cP"
                :height="state.height"
                :data="state.tableData"
                @current-change="handleCurrentChangeRow"
              >
                <el-table-column type="index"></el-table-column>
                <template
                  v-for="(item, index) in state.columnData"
                  :key="index"
                >
                  <el-table-column
                    v-if="item.render && item.prop == 'status'"
                    :label="item.label"
                    :prop="item.prop"
                    :filter-method="filterTag"
                    :filters="filters(item)"
                  >
                    <template #default="scope">
                      <el-switch
                        v-if="scope.row.edit"
                        v-model="scope.row.status"
                      >
                      </el-switch>
                      <el-tag v-else :type="scope.row.status ? '' : 'danger'">{{
                        scope.row.status ? "开启" : "关闭"
                      }}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                    v-else-if="item.prop == 'address'"
                    :label="item.label"
                    :prop="item.prop"
                  >
                    <template
                      #default="scope"
                    >
                      <el-input
                        v-if="scope.row.edit"
                        v-model="scope.row.address"
                        placeholder="地址"
                      ></el-input>
                      <span v-else>{{ scope.row.address }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-else-if="item.prop == 'name'"
                    :label="item.label"
                    :prop="item.prop"
                  >
                    <template
                      #default="scope"
                    >
                      <el-link @click.native="handleGoDetail" type="primary">{{
                        scope.row.name
                      }}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column v-else :label="item.label" :prop="item.prop">
                  </el-table-column>
                </template>

                <el-table-column label="操作" fixed="right" align="right">
                  <template #default="scope">
                    <el-icon
                      v-if="scope.row.edit"
                      class="mx15"
                      color="#67C23A"
                      size="18px"
                      @click="handleEdit(scope.$index, scope.row)"
                      ><check
                    /></el-icon>

                    <el-button
                      size="small"
                      type="danger"
                      class="mx15"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-skeleton>
        </div>
      </template>
    </TableV2>
    <drawerDetail v-model="centerDialogVisible" title="详情页"
    :tabs="ruleForm.tabs"
    >
      <template #detailSynopsis>
        <span class="gray">创建时间 </span><span class="mx15">2021-11-10 15:49</span>
         <span class="gray">最近更新时间 </span><span class="mx15">2021-11-10 15:49</span>
      </template>
      <template #operationBotton>
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <el-button>中文</el-button>
      </template>
      <template #operationContent="{type}">
        {{ type }}
      </template>
    </drawerDetail>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
import drawerDetail from "/@/components/drawer/drawer.vue";
import Column from "/@ts/components/table/Column";
import type {FormInstance } from "element-plus";
let centerDialogVisible = ref(false);

const handleEdit = (index: number) => {
  state.tableData[index].edit = false;
};
const formSize = ref("");
const ruleFormRef = ref<FormInstance>();
const editableTabsValue = ref("1");
const ruleForm = reactive({
  tabs:[{
    name:'基本信息',
    type:'1'
  },{
    name:'联系人',
    type:'2'
  },{
    name:'项目',
    type:'3'
  },{
    name:'合同',
    type:'4'
  }
],
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
interface User {
  date: string;
  name: string;
  address: string;
  edit: boolean;
  index: number;
}
const filterTag = (value: string, row: any, column: any) => {
  let bool: any = true;
  const property = column["property"];
  switch (property) {
    case "status":
      bool = row.status == value;
      break;
  }
  return bool;
};
const filters = (data: any) => {
  let bool: any = false;
  switch (data.prop) {
    case "status":
      bool = [
        { text: "开启", value: true },
        { text: "关闭", value: false },
      ];
      break;
  }
  return bool;
};
const rules = reactive({
  name: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    {
      min: 3,
      max: 5,
      message: "Length should be 3 to 5",
      trigger: "blur",
    },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
});
const handleCurrentChangeRow = (val: User) => {
  for (let index = 0; index < state.tableData.length; index++) {
    state.tableData[index].edit = false;
  }
  state.tableData[val.index].edit = true;
  console.log(" state.tableData[val.index] :>> ", state.tableData[val.index]);
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: any) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
onMounted(() => {
  state.tableData = [];
  for (let index = 0; index < 40; index++) {
    state.tableData.push({
      edit: false,
      index: index,
      date: "2016-05-02",
      name: "王小虎",
      status: false,
      address: "上海市普陀区金沙江路 1518 弄",
    });
  }
});
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

// computed(()=>{

//     return keys;
// });
const pageInfo = reactive({
  currentPage: 1,
  total: 100,
  pageSize: 40,
  pageSizes: [100, 200, 300, 400],
  layout: "total, prev, pager, next,sizes",
});

const state: any = reactive({
  height: 0,
  columnData: [
    {
      label: "用户名称",
      prop: "date",
    },
    {
      label: "用户昵称",
      prop: "name",
      render: true,
    },
    {
      label: "部门",
      prop: "status",
      render: true,
    },

    {
      label: "手机号",
      prop: "address",
    },
    {
      label: "状态",
      prop: "address",
    },
     {
      label: "创建时间",
      prop: "address",
    },
      
  ],
  tableData: [],
});
const handleSeach = (size: number) => {
  console.log("size :>> ", size);
};
const getHeight = (height: number) => {
  state.height = height;
};
const handleGoDetail = () => {
  centerDialogVisible.value = true;
};
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
};
const handleCurrentChange = (page: number) => {
  pageInfo.currentPage = page;
};
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};
</script>

<style  scoped lang="scss" >
</style>
